Skip to main content

按钮

如何添加按钮​

添加 Toolbar 按钮​

thisApp.listOnTableLoaded = async (ctx) => {
  const list = ctx.getListContext().list;

  // 添加批量按钮
  list.getToolbar().addButton({
      key: 'batchDelete',
      text: '批量删除',
      onClick: (clickCtx) => {
        const masterIds = Array.from(new Set(clickCtx.getListContext().list.selectedRows.map(row => row.masterRowNode.id)));
        // do batch delete
        await batchDelete(masterIds);
        // 删除后刷新列表数据
        clickCtx.getListContext().list.refresh();
      }
  })
}

添加行按钮​

thisApp.listOnTableLoaded = async (ctx) => {
  const list = ctx.getListContext().list;

  // 添加行按钮
  list.getToolbar().addButton({
    key: 'delete',
    text: '删除',
    onClick: (clickCtx) => {
      // 当前行的表头 ID
      const masterId = clickCtx.getCurrent().row.masterRowNode.id;
      // do batch delete
      await batchDelete([masterId]);
      // 删除后刷新列表数据
      clickCtx.getListContext().list.refresh();
    }
  })
  
}

根据 listNode 上下文信息添加按钮​

  • 展示模式（整单、明细）
thisApp.listOnTableLoaded = async (ctx) => {
  const list = ctx.getListContext().list;
  // isSubGridMode 代表是否是明细模式
  if (list.isSubGridMode) {
    // 明细模式时添加行按钮
    list.getRowActionBar().addButton({
      key: 'detailDelete',
      text: '明细删除',
      onClick: (clickCtx) => {
      }
    })    
  }

  if (!list.isSubGridMode) {
    // 整单模式时添加整单删除按钮
    list.getRowActionBar().addButton({
      key: 'masterDelete',
      text: '整单删除',
      onClick: (clickCtx) => {
      }
    })    
  }
}
  • 列表实体对象
thisApp.listOnTableLoaded = async (ctx) => {
  const list = ctx.getListContext().list;
  // entityName 当前列表实体，栏目、查询数据时的实体
  if (list.entityName === 'ReimburseItem') {
    // 实体为报销单明细时添加明细删除按钮
    list.getRowActionBar().addButton({
      key: 'detailDelete',
      text: '明细删除',
      onClick: (clickCtx) => {
      }
    })    
  }

  if (list.entityName === 'Reimburse') {
    // 实体为报销单时添加整单删除按钮
    list.getRowActionBar().addButton({
      key: 'masterDelete',
      text: '整单删除',
      onClick: (clickCtx) => {
      }
    })    
  }
}

按钮状态管理​

按钮实例的状态有两个属性：

  • visible， 控制按钮显示/隐藏（UI不可见）
  • disabled, 控制按钮的禁用/启用状态（UI可见，决定是否能点击）

按钮状态可以通过对应位置的按钮APi获取到按钮实例直接进行赋值操作，如下以toolbar和行按钮举例

toolbar 按钮状态控制​

// 添加批量删除按钮
thisApp.listOnTableLoaded = (ctx) => {
  // 1.添加 toolbar 区域批量删除按钮
  ctx.getListContext().list.getToolbar().addButton({
    key: 'batch-delete',
    text: '批量删除',
    onClick: (clickCtx) => {
      // execute delete
    }
  })

  // 2.获取按钮实例设置状态
  const batchDeleteBtn = ctx.getListContext().list.getToolbar().getButton('batch-delete');
  ctx.getListContext().runInAction(() => {
    // 设置禁用状态
    batchDeleteBtn.disabled = true;
    // 设置显示状态
    batchDeleteBtn.visible = false;
  })
}

行按钮状态控制​

// 添加批量删除按钮
thisApp.listOnTableLoaded = (ctx) => {
// 1.添加行删除按钮
  ctx.getListContext().list.getToolbar().addButton({
    key: 'batch-delete',
    text: '批量删除',
    onClick: (clickCtx) => {
      // execute delete
    }
  })
}

// 行按钮比较特殊，依赖于行数据所以需在 listOnTableDataChanged 中处理状态
thisApp.listOnTableDataChanged = (ctx) => {
  const rowActionBar = ctx.getListContext().list.getRowActionBar();
  // 2.当数据加载完毕后获取行按钮实例设置状态
  ctx.getListContext().list.rows.forEach((row) => {
    const deleteBtn = rowActionBar.getRowButton('delete', row.rowIndex);
    ctx.getListContext().runInAction(() => {
      // 设置禁用状态
      deleteBtn.disabled = true;
      // 设置显示状态
      deleteBtn.visible = false;
    })
  })
  
}

按钮的显示/隐藏、禁用/启用往往和数据和使用场景有关，下面提供和数据挂钩控的制按钮状态场景示例。

根据选中行设置按钮状态​

下面的例子根据是否有选中行设置按钮的禁用状态

caution

如果按钮的状态与选中行有关，只能在 listOnRowSelectedChanged 事件中设置按钮的状态


// 添加批量删除按钮
thisApp.listOnTableLoaded = (ctx) => {
  ctx.getListContext().list.getToolbar().addButton({
    key: 'batch-delete',
    text: '批量删除',
    onClick: (clickCtx) => {
      // execute delete
    }
  })
}

// 监听选中行变化
thisApp.listOnRowSelectedChanged = (ctx) => {
  const list = ctx.getListContext().list;

  // 设置禁用状态
  list.getToolbar().getButton('batch-delete').disabled = list.selectedRows.length === 0;
}

根据行数据控制行按钮状态​

下面的例子根据是行的的单据完全状态是否是审批中设置按钮的visible

caution

如果按钮的状态与数据有关，只能在 listOnTableDataChanged 事件中设置按钮的状态


// 添加行审批按钮
thisApp.listOnTableLoaded = (ctx) => {
  ctx.getListContext().list.getRowActionBar().addButton({
    key: 'approval',
    text: '审批',
    onClick: (clickCtx) => {
      // execute approval
    }
  })
}

// 监听选中行变化
thisApp.listOnTableDataChanged = (ctx) => {
  const list = ctx.getListContext().list;
  const rowActionBar = list.getRowActionBar();

  list.rows.forEach(row => {
    // 根据行是否处理待审批控制审批按钮是否显示
    rowActionBar.getButton('approval', row.rowIndex).visible = row.billFullStatusObject.id === 'BillStatus.approving';
  })
}

根据整单明细模式/实体控制按钮状态​

caution

不推荐使用展示模式/实体对象控制按钮状态。 推荐根据不同模式/实体有效添加按钮。下面例子根据模式添加按钮。


// 添加行审批按钮
thisApp.listOnTableLoaded = (ctx) => {
  const list = ctx.getListContext().list;

  if (list.isSubGridMode) {
    // 如果是明细模式则添加行审批
    list.getRowActionBar().addButton({
      key: 'detail-approval',
      text: '明细审批',
      onClick: (clickCtx) => {
        // execute approval
      }
    })
  } else {
    // 否则整单模式添加批量审批
    list.getToolbar().addButton({
      key: 'master-approval',
      text: '整单审批',
      onClick: (clickCtx) => {
        // execute approval
      }
    })
  }
}